<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片库</title>
    <link rel="stylesheet" type="text/css" href="../static/css/elementui-ui-font.css"/>
    <link rel="stylesheet" type="text/css" href="../static/css/elementui.css"/>
    <script src="../static/js/Vue-2.6.12.js" type="text/javascript" charset="utf-8"></script>
    <script src="../static/js/axios.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../static/js/elementui.js" type="text/javascript" charset="utf-8"></script>
    <style type="text/css">
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 78px;
            line-height: 78px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 78px;
            display: block;
        }
    </style>
</head>
<body>

<div id="app">
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="相册名称">
            <el-input v-model="searchForm.name" placeholder="相册名称"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="findList">查询</el-button>
            <el-button type="success" @click="dialogFormVisible=true,photos={}">新增相册</el-button>
        </el-form-item>
    </el-form>

    <el-table :data="categoryList" style="width: 100%" border>
        <el-table-column prop="id" label="编号" width="120">
        </el-table-column>
        <el-table-column prop="name" label="相册名称" width="250">
        </el-table-column>
        <el-table-column label="封面" width="120">
            <template slot-scope="scope">
                <el-image
                        style="width: 100px; height: 80px"
                        :src="imgurl" fit="contain"
                        :preview-src-list="srcList">
                </el-image>
            </template>
        </el-table-column>
        <el-table-column prop="goodsNum" label="图片数量" width="100">
        </el-table-column>
        <el-table-column prop="seq" label="排序" width="120">
        </el-table-column>
        <el-table-column prop="" label="相册描述">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="success" @click="edit(scope.row.id)">查看</el-button>
                <el-button type="primary" @click="edit(scope.row.id)">编辑</el-button>
                <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination @size-change="findList" @current-change="findList" :current-page.sync="currentPage"
                   :page-sizes="[10, 20, 30, 40]"
                   :page-size.sync="size" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

    <!-- 新增窗口 -->
    <el-dialog title="保存" :visible.sync="dialogFormVisible">
        <el-form :model="category">
            <el-form-item label="分类编号" label-width="100px" hidden>
                <el-input v-model="category.id"></el-input>
            </el-form-item>
            <el-form-item label="分类名称" label-width="100px">
                <el-input v-model="category.name"></el-input>
            </el-form-item>
            <el-form-item label="是否显示" label-width="100px">
                <el-switch
                        v-model="category.isShow"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-value="1"
                        inactive-value="0">
                </el-switch>
            </el-form-item>
            <el-form-item label="是否导航" label-width="100px">
                <el-switch
                        v-model="category.isMenu"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-value="1"
                        inactive-value="0">
                </el-switch>
            </el-form-item>
            <el-form-item label="选择模板" label-width="100px">
                <el-select v-model="category.templateId" placeholder="请选择">
                    <el-option v-for="(template,index) in templateList" :key="index" :label="template.name" :value="template.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="排序" label-width="100px">
                <el-input v-model="category.seq" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">保存</el-button>
        </div>
    </el-dialog>
</div>

<script type="text/javascript">
    new Vue({
        el: "#app",
        data: function () {
            return {
                categoryList: [],
                total: 100,
                size: 10,
                currentPage: 1,
                searchForm: {parentId: 0},
                dialogFormVisible: false,
                category: {},
                parentIds: [0],
                templateList:[],
                templateName:'',
                srcList: [
                    'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
                    'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
                ],
                imgurl:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            }
        },
        methods: {
            findTemplateList(){
                axios.get(`/api/template/findList.do`).then((resp)=>{
                    this.templateList = resp.data
                }).catch((error)=>{
                    this.$message.error("模板列表读取失败，请刷新重试！")
                })
            },
            findList() {
                axios.post(`/api/category/findcondtionpage.do?startpage=${this.currentPage}&pagesize=${this.size}`, this.searchForm)
                    .then(
                        response => {
                            this.categoryList = response.data.records
                            this.total = response.data.total
                        }).catch(function (error) {
                    console.log(error);
                })
            },
            save() {
                let id = this.category.id
                let action = id == null ? 'save' : 'update'
                this.category.parentId = this.searchForm.parentId
                axios.post(`/api/category/${action}.do`, this.category).then((response) => {
                    if (response.data.code == 1) {
                        this.dialogFormVisible = false
                        this.$message.error(response.data.msg)
                    } else {
                        this.dialogFormVisible = false
                        this.$message({
                            message: response.data.msg,
                            type: 'success',
                        })
                    }
                    this.findList()
                }).catch((error) => {
                    this.$message({
                        message: '添加失败，请重试或请联系管理员',
                        type: 'warning',
                    })
                })

            },
            edit(id) {
                this.dialogFormVisible = true
                axios.get(`/api/category/findbyid.do?id=${id}`).then((resp) => {
                    this.category = resp.data
                    this.findList()
                })
            },
            del(id) {
                this.$confirm("确认删除？", '确认删除').then(() => {
                    axios.get(`/api/category/deletebyid.do?id=${id}`).then((response) => {
                        if (response.data.code == 1) {
                            this.$message.error(response.data.msg)
                        } else {
                            this.$message.success(response.data.msg)
                        }
                        this.findList()
                    })
                })
            }
        },
        created() {
            this.findList()
            this.findTemplateList()
        }
    })
</script>
</body>
</html>
